웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
안녕하세요! 오늘부터는 포스팅에 앞서서 항상 인사를 먼저 드리고 글을 작성하려고 합니다^^ 최근 여러 사유로 포스팅을 올리지 못했는데요 ~ 앞으로는 좀 더 자주 올릴 수 있도록 노력할테니 지금처럼 많은 관심 부탁 드립니다. 그럼 계속해서 작성해 볼께요!
입력폼에서 가장 많이 사용되는 input 태그 ~ input 태그를 사용하여 방문자로 부터 여러 정보를 입력 받아 서버에 전송 받을 수 있습니다. 이 때 input 태그에 사용되는 여러 가지 어트리뷰트가 존재하는데요 ~ 여기서 최대 길이를 설정하는 방법은 무엇일까요? 바로 maxlength입니다.
위 코드를 아래에 구현해볼까요?
여기서 두 번째 입력폼의 input 태그는 오직 6자리의 문자값만을 최대값으로 가지게 됩니다. maxlength 값이 설정되어 있기 때문입니다.
maxlength // 최대 입력 받을 수 있는 문자열의 길이를 설정
그렇다면 이 속성은 언제 사용할까요? 매우 다양하게 사용됩니다. 예를들어 이메일을 입력 받을 때 최대 값을 30으로 설정할 수 있습니다. 30 자리를 넘어가는 이메일 주소는 입력이 불가능하겠죠? 아니면 생년월일을 20220428처럼 8자리로 제안하여 사용할 수 도 있겠죠. 아니면 핸드폰 자릿수 만큼 설정하는 것도 가능합니다. 01012345678처럼 11자리를 최대값으로 설정할 수도 있죠.
위에서 세 가지 예를 들었는데요 아래에 나열해보죠.
1. 이메일
2. 생년월일
3. 핸드폰 번호
여기서 첫 번째의 이메일 그리고 나머지인 생년월일, 핸드폰 번호는 차이점이 있는데요... 바로 숫자를 사용하는가의 여부입니다.
input 태그는 숫자 타입의 설정이 가능합니다. 숫자 타입을 설정할 경우 숫자만 입력이 가능합니다. 이런 이유로 숫자만 입력 받는 경우에는 간단하게 type="number"를 사용하는 것이 좋은 방법이죠.
그런데 문제는 여기서 발생합니다. 위에서 maxlength가 정상 동작할까요? 결론은 아닙니다. 그 이유는 숫자 타입의 경우 문자열에 사용하는 maxlength 어트리뷰트(속성)가 동작하지 않기 때문입니다. 실제로 입력해보면 제한없이 계속 입력됩니다. 어떻게 해야 해결될까요?
방법은 몇 가지가 있습니다.
1. 정규표현식(regex)을 pattern 어트리뷰트에 maxlength와 함께 사용하기
2. 자바스크립트에서 키 입력 이벤트로 제어하기
3. min, max 어트리뷰트를 사용하기
여기서 바로 첫 번째 방법이 가장 선호하고 해결 가능한 최선의 방법입니다. pattern 어트리뷰트는 input태그에 정규표현식을 사용하여 입력 받을 수 있는 값을 제한하는 것이 가능하죠. 이를 사용하여 아래와 같이 코드를 작성해보겠습니다.
이제 위 코드를 아래에 구현해봅니다.
어떤가요? 숫자만 입력되며 8자리 제한된 것을 알 수 있습니다. 이 방법이 가장 효과적인 방법입니다. 다만 모바일 환경에서 pattern 속성이 지원되지 않을 수 있을 수 있다는 단점이 존재합니다. 그럼에도 가장 좋은 방법입니다.
! 그 외의 방법들 알아보기
위에서 두 번째 방법은 이벤트를 사용하는 방법입니다. 즉 키를 누를 때 입력된 값의 자릿수를 검증하면서 확인하는 방법입니다. 이 방법도 실제 코드를 작성하면 간단한 방법임을 확인할 수 있습니다. 다만 아래의 방법이 더 간단합니다.
min, max 어트리뷰트는 숫자 타입의 input에서만 사용 가능합니다. min, max는 각각 최소 최대값을 의미하죠~
만약 자리수를 최소 1부터 8까지만 허용한다면? 아래와 같이 적용할 수 있습니다.
위 코드를 실제로 적용하면 아래와 같이 나타나게 됩니다. 과연 잘 동작할까요?
매우 간단한 방법이지만 문제가 있습니다. max값이 8자리까지만 설정되어 있지만 입력은 그 이상도 가능합니다. 다만 input 태그 내부에서 값을 올리거나 내리는 버튼을 누르거나 키보드 방향키를 누를 경우에만 min, max가 적용된다는 단점이 있습니다. 또 다른 단점이 있습니다. 무엇이냐... 바로 최대값을 넘거갈 경우 그 값이 무조건 설정된 최대값으로 변경된다는 점입니다. 예를들어 최대값 max가 1000이라면? 10000, 100000 또는 그 이상을 입력해도 무조건 1000이 입력됩니다. 단순히 입력만 안되는 것이 아니라 최대값으로 변경되는게 살짝 아쉬운 점입니다.
여기까지 input의 number 타입에서 최대 자릿수 설정 방법에 대하여 간략하게 알아보았습니다.
# HTML input 태그에서 maxlength 사용하기, 문자열 최대 길이 설정
입력폼에서 가장 많이 사용되는 input 태그 ~ input 태그를 사용하여 방문자로 부터 여러 정보를 입력 받아 서버에 전송 받을 수 있습니다. 이 때 input 태그에 사용되는 여러 가지 어트리뷰트가 존재하는데요 ~ 여기서 최대 길이를 설정하는 방법은 무엇일까요? 바로 maxlength입니다.
<input type="text" placeholder="최대 길이 없음" />
<input type="text" placeholder="최대 길이 6으로 설정" maxlength="6" />
<input type="text" placeholder="최대 길이 6으로 설정" maxlength="6" />
위 코드를 아래에 구현해볼까요?
<input type="text" placeholder="최대 길이 없음" />
<input type="text" placeholder="최대 길이 6으로 설정" maxlength="6" />
<input type="text" placeholder="최대 길이 6으로 설정" maxlength="6" />
여기서 두 번째 입력폼의 input 태그는 오직 6자리의 문자값만을 최대값으로 가지게 됩니다. maxlength 값이 설정되어 있기 때문입니다.
maxlength // 최대 입력 받을 수 있는 문자열의 길이를 설정
그렇다면 이 속성은 언제 사용할까요? 매우 다양하게 사용됩니다. 예를들어 이메일을 입력 받을 때 최대 값을 30으로 설정할 수 있습니다. 30 자리를 넘어가는 이메일 주소는 입력이 불가능하겠죠? 아니면 생년월일을 20220428처럼 8자리로 제안하여 사용할 수 도 있겠죠. 아니면 핸드폰 자릿수 만큼 설정하는 것도 가능합니다. 01012345678처럼 11자리를 최대값으로 설정할 수도 있죠.
위에서 세 가지 예를 들었는데요 아래에 나열해보죠.
1. 이메일
2. 생년월일
3. 핸드폰 번호
여기서 첫 번째의 이메일 그리고 나머지인 생년월일, 핸드폰 번호는 차이점이 있는데요... 바로 숫자를 사용하는가의 여부입니다.
! 숫자를 사용하는 경우의 최대 자릿수 설정 방법
input 태그는 숫자 타입의 설정이 가능합니다. 숫자 타입을 설정할 경우 숫자만 입력이 가능합니다. 이런 이유로 숫자만 입력 받는 경우에는 간단하게 type="number"를 사용하는 것이 좋은 방법이죠.
<input type="number" maxlength="8" />
그런데 문제는 여기서 발생합니다. 위에서 maxlength가 정상 동작할까요? 결론은 아닙니다. 그 이유는 숫자 타입의 경우 문자열에 사용하는 maxlength 어트리뷰트(속성)가 동작하지 않기 때문입니다. 실제로 입력해보면 제한없이 계속 입력됩니다. 어떻게 해야 해결될까요?
방법은 몇 가지가 있습니다.
1. 정규표현식(regex)을 pattern 어트리뷰트에 maxlength와 함께 사용하기
2. 자바스크립트에서 키 입력 이벤트로 제어하기
3. min, max 어트리뷰트를 사용하기
여기서 바로 첫 번째 방법이 가장 선호하고 해결 가능한 최선의 방법입니다. pattern 어트리뷰트는 input태그에 정규표현식을 사용하여 입력 받을 수 있는 값을 제한하는 것이 가능하죠. 이를 사용하여 아래와 같이 코드를 작성해보겠습니다.
<input type="text" pattern="\d*" maxlength="8" />
이제 위 코드를 아래에 구현해봅니다.
<input type="text" pattern="\d*" maxlength="8" />
어떤가요? 숫자만 입력되며 8자리 제한된 것을 알 수 있습니다. 이 방법이 가장 효과적인 방법입니다. 다만 모바일 환경에서 pattern 속성이 지원되지 않을 수 있을 수 있다는 단점이 존재합니다. 그럼에도 가장 좋은 방법입니다.
! 그 외의 방법들 알아보기
위에서 두 번째 방법은 이벤트를 사용하는 방법입니다. 즉 키를 누를 때 입력된 값의 자릿수를 검증하면서 확인하는 방법입니다. 이 방법도 실제 코드를 작성하면 간단한 방법임을 확인할 수 있습니다. 다만 아래의 방법이 더 간단합니다.min, max 어트리뷰트는 숫자 타입의 input에서만 사용 가능합니다. min, max는 각각 최소 최대값을 의미하죠~
만약 자리수를 최소 1부터 8까지만 허용한다면? 아래와 같이 적용할 수 있습니다.
<input type="number" min="0" max="99999999" />
위 코드를 실제로 적용하면 아래와 같이 나타나게 됩니다. 과연 잘 동작할까요?
<input type="number" min="0" max="99999999" />
매우 간단한 방법이지만 문제가 있습니다. max값이 8자리까지만 설정되어 있지만 입력은 그 이상도 가능합니다. 다만 input 태그 내부에서 값을 올리거나 내리는 버튼을 누르거나 키보드 방향키를 누를 경우에만 min, max가 적용된다는 단점이 있습니다. 또 다른 단점이 있습니다. 무엇이냐... 바로 최대값을 넘거갈 경우 그 값이 무조건 설정된 최대값으로 변경된다는 점입니다. 예를들어 최대값 max가 1000이라면? 10000, 100000 또는 그 이상을 입력해도 무조건 1000이 입력됩니다. 단순히 입력만 안되는 것이 아니라 최대값으로 변경되는게 살짝 아쉬운 점입니다.
여기까지 input의 number 타입에서 최대 자릿수 설정 방법에 대하여 간략하게 알아보았습니다.
아래의 글도 찾고 계시지 않나요?
